<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>滚动监听-body主体演示</title>

</head>

<body>
    <h3>滚动监听- <i>body</i> 主体演示</h3>
    <div id="code"></div>
    <div id="codeTip"></div>

    <script src="./js/JJYChengScrollListening.js"></script>
    <script>
        var JiaZaiObj = {
            Datas: [],//数据
            PageInfo: {
                pageIndex: 1, //页码
                pageSize: 25, //条数（每页多少条）
                total: 0,//总条数
            },//页码
            GetDataStatus: true,//是否加载数据
            GetDataStatusStr: '加载中...',
        };
        var jjySLObj = '';

        //获取数据
        function GetDataFun() {
            let htmNode=document.querySelector("#code");
            let TipNode=document.querySelector("#codeTip");
            

            if (JiaZaiObj.PageInfo.pageIndex > 5) {
                JiaZaiObj.GetDataStatus = false;
                JiaZaiObj.GetDataStatusStr = '没有更多了...';
                TipNode.innerHTML='<p>' + JiaZaiObj.GetDataStatusStr+'</p>';
                return false;
            }
            else {
                JiaZaiObj.GetDataStatus = true;
                JiaZaiObj.GetDataStatusStr = '数据加载中...';
                TipNode.innerHTML='<p>' + JiaZaiObj.GetDataStatusStr+'</p>';
            }

            console.warn('处理数据中...', jjySLObj)

            if (jjySLObj) {
                jjySLObj.SetIsDisabled(true);//停止处理
            }

            //定时器是为了模拟ajax的数据请求
            setTimeout(function () {

                for (let index = 0; index < JiaZaiObj.PageInfo.pageSize; index++) { 
                    let html=htmNode.innerHTML;
                    htmNode.innerHTML=html+'<p>【' + JiaZaiObj.PageInfo.pageIndex + '】--' + index+'</p>';
                }
                JiaZaiObj.PageInfo.pageIndex++;//增加页码

                console.warn('处理数据完毕！')
                if (jjySLObj) {
                    jjySLObj.SetIsDisabled(false);//开启处理
                }

            }, 1 * 1000);
        }
        GetDataFun();//获取数据


        var jjySLObj = JJYChengScrollListeningFun({
            domIdName: '',//为空则监听整个页面
            distance: 100,//距离底部多少开始加载
            IsDisabled: false,//是否停止
            CallBackFun: function (res) {
                console.log('html回调=============', res);
                console.log('jjySLObj=============', jjySLObj);
                GetDataFun();//获取数据
            },//回调方法
        });

    </script>



</body>

</html>